<template>
  <c-layout>
    <c-header class="live__launch">
      <c-launch></c-launch>
    </c-header>

    <c-content class="content">
      <c-box-skin pt-10>
        <div
          class="live"
          v-for="(item, index) in liveList"
          :key="index"
          mx-10
          pt-30
          pb-10
        >
          <router-link :to="{ path: '/css-architecture-mogujie/live/detail', query: { id: item.id } }">
            <c-magazine
              class="live__container"
              bor-7
              :image="item['background']"
            >
              <c-avatar
                class="live__header"
                :url="item['avatar']"
                :text="item['name']"
                pb-18
              ></c-avatar>
              <div
                d-flex-center
                text-tertiary
                class="live__status"
                pl-10
                pr-10
                bga-3
                bor-4
              >
                直播中 | {{ item["watchNum"] }}
              </div>
              <span class="live__title" text-tertiary fz-16>{{
                item["liveTitle"]
              }}</span>
              <div d-flex-center>
                <c-magazine
                  class="product"
                  v-for="(goodsItem, index) in item['goods']"
                  :key="index"
                  :image="goodsItem['image']"
                  mr-10
                >
                  <div class="product__des" text-tertiary>
                    {{ goodsItem["price"] }}
                  </div>
                </c-magazine>
              </div>
              <div class="chat">
                <c-avatar
                  class="chat__header"
                  url="https://s5.mogucdn.com/mlcdn/c45406/201015_49kl85i184k4gg6cf247eeg0ijl33_400x400.jpg_100x100.jpg"
                  text="小仙子"
                  text-tertiary
                ></c-avatar>
              </div>
            </c-magazine>
          </router-link>
        </div>
      </c-box-skin>
    </c-content>
  </c-layout>
</template>

<script setup lang="ts">
import CLayout from "@/components/layout/Layout.vue";
import CContent from "@/components/layout/Content.vue";
import CBoxSkin from "@/components/box-skin/BoxSkin.vue";
import CMagazine from "@/components/magazine/Magazine.vue";
import CAvatar from "@/components/avatar/Avatar.vue";
import CLaunch from "@/components/launch/Launch.vue";
import { getLives } from "@/api/live";
import { onMounted, ref } from "vue";
const liveList = ref([]);
onMounted(() => {
  getLives().then((res) => {
    liveList.value = res.data;
  });
});
</script>

<style scoped lang="scss">
@include b(content) {
  padding-bottom: 50px;
}

@include b(live) {
  @include e(container) {
    position: relative;
    height: 180px;
  }

  @include e(header) {
    @include position(absolute, top -30px left 14px);
    & ::v-deep img {
      margin-right: 8px;
      @include dimensions(40px);
      border: 2px solid #fff;
    }
  }

  @include e(status) {
    @include position(absolute, top 50px left 14px);
    height: 20px;
  }

  @include e(title) {
    @include position(absolute, top 75px left 14px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  }
}

@include b(product) {
  @include position(absolute, top 105px left 14px);
  @include dimensions(65px);
  @include e(des) {
    padding-top: 45px;
    padding-left: 0px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  }
}

@include b(chat) {
  @include position(absolute, bottom 20px right 10px);
  @include dimensions(100px, 50px);
  @include e(header) {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    & ::v-deep img {
      @include dimensions(28px);
      margin-right: 5px;
    }
  }
}
.live__launch {
  position: sticky;
  top: 0;
  z-index: 111;
}
</style>
